<template>
    <div>
        <el-button type="text" @click="addItem">创建一项</el-button>
        <el-row type="flex" v-for="(item,i) in list" :key="i">
            <el-input v-model="item.key" placeholder="请输入属性名称" style="max-width: 178px;"></el-input>
            <el-input v-model="item.value" placeholder="请输入属性值" style="margin-left: 12px;max-width: 178px;"></el-input>
            <el-button type="danger" icon="el-icon-delete" @click="deleteItem(i)" style="margin-left:12px"></el-button>
        </el-row>
    </div>
</template>
<script>
    export default {
        props: {
            list: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        watch: {
            list(newValue) {
                this.$emit("update:list", newValue);
            },
        },
        data() {
            return {

            }
        },
        methods: {
            addItem() {
                this.list.push({
                    key: '',
                    value: ''
                })
            },
            deleteItem(index) {
                this.list.splice(index, 1)
            }
        }
    }
</script>
<style lang="">

</style>